<template>
  <div>
    <h3>主页面</h3>
    欢迎
    <p>手机号为：{{$store.state.user.mobile}}</p>  
    <p>用户名为：{{ $store.state.user.username }}</p>
    <div>{{ massage }}</div>

    <el-table   :data="massage"   style="width: 1200px;margin:0 auto">
      <el-table-column    prop="id"    label="编号"    width="180">  </el-table-column>
      <el-table-column    prop="name"    label="姓名"    width="180">  </el-table-column>
      <el-table-column    prop="sex"    label="性别"    width="180">  </el-table-column>
      <el-table-column    prop="selfhood"    label="个性签名"    width="180">  </el-table-column>
      <el-table-column    prop="address"    label="地址"    width="180">  </el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="update(scope.row)">编辑</el-button>
        <!-- <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
      </template>
    </el-table-column>
    </el-table>
    <div>
        <h3>修改</h3>
        <div>姓名 <input type="text" v-model="update_list.name"> </div>
        <div>性别 <input type="text" v-model="update_list.sex"> </div>
        <div>个性签名 <input type="text" v-model="update_list.selfhood"> </div>
        <div>地址 <input type="text" v-model="update_list.address"> </div>
        <div><button @click="updateOne">修改</button> </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            user_json:{},
            massage:{},
            update_list:{},
        }
    },
    mounted(){
        this.getMassage()
        let user_json=localStorage.getItem('user')
        if(user_json){
            let user_obj=JSON.parse(user_json)
            this.$store.commit('setUser',user_obj)
        }
    },
    methods:{
        getMassage(){
            axios.get('user/massage/',this.massage)
            .then(resp=>{
                console.log(resp);
                this.massage=resp.data
            })
            .catch(err=>{
                console.log(err);
            })
        },
        update(item){
            this.update_list={...item}
        },
        updateOne(){
            axios.put('user/update/'+this.update_list.id+'/',this.update_list)
            .then(resp=>{
                console.log(resp);
                alert('修改成功')
                this.getMassage()
            })
            .catch(err=>{
                console.log(err);
            })
        }
    }
}
</script>

<style>

</style>